feat(events): all events page

1 files changed, 4 insertions, 63 deletions

diff --git a/src/routes/events/group/[group]/+page.svelte b/src/routes/events/group/[group]/+page.svelte
index 8dd09118..ef920254 100644
--- a/src/routes/events/group/[group]/+page.svelte
+++ b/src/routes/events/group/[group]/+page.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
 	import type { Group as GroupType } from '$lib/Database/groups';
-	import type { Event } from '$lib/Database/events';
+	import type { Event as EventType } from '$lib/Database/events';
 	import Message from '$lib/Loading/Message.svelte';
 	import root from '$lib/Utility/root';
 	import { onMount } from 'svelte';
-	import locale from '$stores/locale.js';
 	import Group from '$lib/Events/Group.svelte';
+	import Event from '$lib/Events/Event.svelte';
 
 	export let data;
 
@@ -17,7 +17,7 @@
 
 	const asGroup = (group: any) => group as GroupType;
 
-	const asEvent = (event: any) => event as Event;
+	const asEvent = (event: any) => event as EventType;
 </script>
 
 {#await groupsResponse}
@@ -50,35 +50,7 @@
 						{:then events}
 							{#if events}
 								{#each events as rawEvent, i}
-									{@const event = asEvent(rawEvent)}
-
-									<a href={event.anilist_url} target="_blank">
-										<div
-											class="card"
-											id="user-grid"
-											style={`background-image: ${
-												event.banner ? `url(${event.banner})` : 'none'
-											}; padding: 0;`}
-										>
-											{#if event}
-												<img src={event.banner} alt="" id="cover-image" />
-											{/if}
-
-											<div class="card" id="user-grid-content">
-												<div id="user-grid-content-text">
-													<p>
-														<a href={event.anilist_url} target="_blank" class="title-text">
-															{event.title}
-														</a>
-														<br />
-														{$locale().dateFormatter(new Date(event.created_at))}
-													</p>
-
-													<p>{event.description}</p>
-												</div>
-											</div>
-										</div>
-									</a>
+									<Event event={asEvent(rawEvent)} />
 
 									{#if i < events.length - 1}
 										<p />
@@ -100,34 +72,3 @@
 {:catch}
 	<Message message="" loader="ripple" slot withReload>Error loading group.</Message>
 {/await}
-
-<style>
-	#user-grid-content {
-		display: flex;
-		flex-wrap: wrap;
-		column-gap: 1.5em;
-		background-color: rgba(0, 0, 0, 0.468);
-		color: #d8d8d8;
-		border-top-left-radius: 0;
-		border-top-right-radius: 0;
-	}
-
-	/* .click-item {
-		margin: 0 0.625rem;
-	} */
-
-	#user-grid {
-		background-size: cover;
-		background-position: center;
-		background-repeat: no-repeat;
-	}
-
-	#cover-image {
-		visibility: hidden;
-		height: 4.5em;
-	}
-
-	.title-text {
-		font-size: 1.1em;
-	}
-</style>